<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="inc :: header('菜单管理')" />
</head>
<body>
    <table id="treeTb" lay-filter="treeTb"></table>
    <!-- 表格操作列 -->
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改数据</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除数据</a>
    </script>
    <script>
        var layer;
        layui.config({
            base:'/js/',
        }).extend({
            tableEdit:'/tableEdit',
            tableTree:'/tableTree',
            treeTable:'/treeTable'
        }).use(['layer','util','tableEdit','tableTree','treeTable'],function () {
            //var tableTree = layui.tableTree;
            var tableTree = layui.treeTable;
            var tableEdit = layui.tableEdit;
            var util = layui.util;
            layer = layui.layer;
            // 渲染表格
            var insTb = tableTree.render({
                elem: '#treeTb',
                url: '/muc/find',
                toolbar: 'default',
                height: 'full-20',
                /*treeConfig: {
                    showField: 'menuName',
                    iconClass:'layui-icon-triangle-r',
                    treeid: 'id',
                    treepid: 'parentId'
                },*/
                tree:{
                    iconIndex:1,
                    isPidData: true,
                    idName: 'id',
                    pidName:'parentId'
                },
                defaultToolbar: ['filter', 'print', 'exports', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [
                    [
                        {type: 'checkbox'},
                        {field: 'menuName', title: '菜单名称', minWidth: 165},
                        {field:'menuIcon',
                            title: '菜单图标', align: 'center', hide: true,
                            templet: '<p><i class="layui-icon {{d.menuIcon}}"></i></p>'
                        },
                        {field: 'menuUrl', title: '菜单地址'},
                        {field: 'authority', title: '权限标识'},
                        {field:'type',title: '类型', templet: '<p>{{d.type=="menu"?"菜单":"按钮"}}</p>', align: 'center', width: 60},
                        {field:'createDate',
                            title: '创建时间', templet: function (d) {
                                return util.toDateString(d.createDate);
                            }
                        }
                    ]
                ]
            });
            tableTree.on('toolbar(treeTb)',function (obj) {
                switch (obj.event) {
                    case 'add':
                        openDig('新增','');
                        break;
                }
            })
        });
        function openDig(title,id){
            var url = '/muc/add';
            if(id!=''){
                id = "?id="+id;
                url = '/muc/edit';
            }
            layer.open({
                title:title,
                type:2,//默认0-信息框，1-页面，2-iframe
                maxmin:true,//是否显示最大化最小按钮
                content:'/muc/addEdit'+id,
                area:['40%','60%'],
                anim:5,
                btn:['确定保存','取消关闭'],
                btnAlign:'c',
                yes:function(i,l){

                    //获取表单
                    var f = layer.getChildFrame('form',i);
                    var data = f.serialize();
                    $.ajax({
                        type:'post',
                        url:url,
                        data:data,
                        dataType:'json',
                        success:function (result) {
                            layer.alert(result.msg);
                            if(result.is){
                                //关闭窗口
                                layer.close(i);
                                //刷新表格
                                layui.treeTable.reload('treeTb');
                            }
                        }
                    });
                },
                btn2:function (index,l) {
                    layer.alert("点击取消");
                }
            });
        }
    </script>
</body>
</html>